@import "variables.scss";

.ListBox {
  position: relative;
  border: 0.1rem solid var(--color-border-secondary);
  border-radius: 0.5em;
  > ul {
    margin: 0;
    overflow: auto;
    height: 14rem; // 7 items * height of li
    > li {
      padding: 0 1rem;
      height: 2rem;
      line-height: 2rem;
      position: relative;

      &.unsaved {
        font-weight: 700;
        color: var(--color-gh-blue);
        position: relative;
        &::before {
          content: "* ";
          position: absolute;
          left: 0;
          padding: 0.2rem;
        }
      }

      &.mark-deleted {
        text-decoration: line-through;
        color: var(--color-text-disabled);
      }

      > .delete-btn {
        visibility: hidden;
        position: absolute;
        right: 2em;
        top: 0.5em;
      }

      &:hover {
        background-color: var(--color-gh-blue);
        color: white;
        > .delete-btn {
          visibility: visible;
        }
      }
    }
  }
}
